<template>
  <!-- 基于 Element UI 新增和修改弹窗 -->
    <a-drawer
            :title="!dataForm.id ? '添加' : '修改'"
            :visible="visible"
            @close="cancel"
            :body-style="{ paddingBottom: '80px' }"
            :width="600"
    >
    <!-- 新增和创建表单表单 -->
    <el-form :model="dataForm" :rules="dataRule"  v-loading="loading" ref="dataForm" @keyup.enter.native="dataSubmit()" label-width="120px" style="padding: 0px 10px;margin: 0px 10px">
    <el-form-item label="CDK数量" prop="count" v-if="!dataForm.id">
      <el-input v-model="dataForm.count" placeholder="请输入生成的CDK数量" size="small" style="width: 350px"></el-input>
    </el-form-item>
      <el-form-item label="兑换比例" prop="conversionrate" v-if="this.selOptions.JavaInfo.level===0">
        <el-input type="number" :min="100" v-model="dataForm.conversionrate" placeholder="兑换比例" size="small" style="width: 350px" >
          <template slot="append">%</template>
        </el-input>
      </el-form-item>
      <el-form-item label="分成比例"  >
        <el-input type="number" v-model="dataForm.extractionrate" placeholder="请输入分成比例" size="small" style="width: 350px">
          <template slot="append">%</template>
        </el-input>
      </el-form-item>

      <el-form-item label="CDK类型" >
        <!--        <el-input v-model="dataForm.adtype" placeholder="请输入广告类型 " size="small"></el-input>-->
        <el-select v-model="dataForm.viptype" placeholder="请选择CDK类型" class="width100" filterable clearable style="width: 350px">
          <el-option
            v-for="item in selOptions.cdkType"
            :key="item.value"
            :value="item.value"
            :label="item.label">
          </el-option>
        </el-select>
      </el-form-item>

<!--    <el-form-item label="分配用户" prop="userid">-->
<!--      <el-select-->
<!--        style="width: 350px"-->
<!--        v-model="dataForm.userid"-->
<!--        filterable-->
<!--        clearable-->
<!--        remote-->
<!--        placeholder="请输入用户名"-->
<!--        :remote-method="querySelectList">-->
<!--        <el-option-->
<!--          v-for="item in userList"-->
<!--          :key="item.id"-->
<!--          :label="item.id+' - '+item.username"-->
<!--          :value="item.id">-->
<!--        </el-option>-->
<!--      </el-select>-->
<!--    </el-form-item>-->
    </el-form>
        <div :style="{position: 'absolute',right: 0,bottom: 0,width: '100%', borderTop: '1px solid #e9e9e9',padding: '10px 16px',background: '#fff',textAlign: 'right',zIndex: 1,}">
            <el-button @click="cancel()" :style="{ marginRight: '8px' }">取消</el-button>
            <el-button type="primary" @click="submit()">确定</el-button>
        </div>
  </a-drawer>
</template>

<script>
    import api from '@/api/api'
    export default {
    components: {
    },
    data () {
      return {
        selOptions: {},
        visible: false,
        loading:false,
        userList: [],
        userid: '',
        username: '',
        querySelectListloading: false,
        dataForm: {
          id: 0,
          count: 1,
          conversionrate: 100,
          extractionrate: 0,
          key: '' ,
          userid: '' ,
          username: '' ,
          tag: '' ,
          invalidday: '' ,
          type: '' ,
          viptype: '' ,
          status: '' ,
          orgid: ''
        },
        dataRule: {
          count: [
            { required: true, message: 'CDK生成数量  为必填项', trigger: 'blur' }
          ],
          userid: [
            { required: true, message: '必须分配用户', trigger: 'blur' }
          ],
          username: [
            { required: true, message: '用户名称  为必填项', trigger: 'blur' }
          ],
          tag: [
            { required: true, message: '标签  为必填项', trigger: 'blur' }
          ],
          invalidtime: [
            { required: true, message: '失效时间  为必填项', trigger: 'blur' }
          ],
          invalidday: [
            { required: true, message: '有效期  为必填项', trigger: 'blur' }
          ],
          type: [
            { required: true, message: '类型，0：未使用，1：已使用  为必填项', trigger: 'blur' }
          ],
          status: [
            { required: true, message: '状态  为必填项', trigger: 'blur' }
          ],
          orgid: [
            { required: true, message: '机构ID  为必填项', trigger: 'blur' }
          ],
          createtime: [
            { required: true, message: '创建时间  为必填项', trigger: 'blur' }
          ],
          updatetime: [
            { required: true, message: '更新时间  为必填项', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      init (id) { // 初始化表单验证规则
        this.dataForm.id = id || undefined
        this.visible = true
        this.selOptions = this.$constants.selOptions
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (this.dataForm.id){
              this.loading = true
                api.post('rest/vabc/cdk/info',{id:this.dataForm.id}).then(res => {
                this.dataForm = res;
            }).finally(() => {
                this.loading = false
            });
          }
        })
      },
      // 表单数据提交
      submit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.loading = true
            let postData=Object.assign({},this.dataForm)
            if(postData.conversionrate>100){
              this.$message.error('兑换比例不得大于100%')
              this.loading = false
              return
            }
            if (!this.dataForm.id){
                postData.id==undefined
                api.post('rest/vabc/cdk/createCDK',postData).then(res =>{
                    this.$message.success("创建成功")
                    this.reset()
                    this.visible = false
                    this.$parent.getDataList()
                }).finally(() => {
                    this.loading = false
                });
            }else{
                api.post('rest/vabc/cdk/update',postData).then(res =>{
                    this.$message.success("保存成功")
                    this.reset()
                    this.visible = false
                    this.$parent.getDataList()
                }).finally(() => {
                    this.loading = false
                });
            }
          }
        })
      },
     cancel(){
        this.visible = false
        this.reset()
    },
      querySelectList(query) {
        if (query !== '') {
          this.querySelectListloading = true
          let postData = {
            'order': 'desc',
            'column': 'id',
            'pageSize': 1000
          }
          postData.username = api.getLikeValue(query)
          api.post('rest/vabc/loginuser/list', postData).then(res => {
            this.userList = res.datalist
          }).finally(() => {
            this.querySelectListloading = false
          })
        } else {
          this.userList = []
        }
      },
    reset(){
        this.$refs.dataForm.resetFields()
        this.$data.dataForm=JSON.parse(JSON.stringify(this.$options.data().dataForm))
        //图片回写
        //this.$refs["childData"].fileList=[]
    }
    }
  }
</script>
